<template>
  <div class="h100 carModelListPage tablePageWarp">
      <car-model-search
        @handleimport="handleImportFile"
        @handlecreate="handleCreate"
        @search="searchData"
        @clickbtn="handleClickSearchBtn"
      />
      <car-model-list ref="carModelList" @showdlistetail="showVehicleDetail" @clickedit="handleCreate"/>
  </div>
</template>
<script>
import CarModelSearch from './components/CarModelSearch.vue'
import CarModelList from './components/CarModelList.vue'
import CarModelStatistics from './components/CarModelStatistics.vue'
import EditCarModel from './components/EditCarModel'
import ImportCarModel from './components/ImportCarModel'
import CarModelDetail from './components/CarModelDetail'
import { minxinDrawerUse } from '@/utils/mixin'
import { mapState } from 'vuex'
import { managePerms } from '@/config/permission/index'
export default {
  mixins: [minxinDrawerUse],
  components: {
    CarModelSearch,
    CarModelList,
    CarModelStatistics,
    EditCarModel,
    ImportCarModel,
    CarModelDetail
  },
  computed: {
    ...mapState({
      rightDrawerEvent: (state) => state.vehicle.rightDrawerEvent
    })
  },
  data () {
    return {
      managePerms,
      formTitle: '',
      actions: {
        // 创建车辆
        ccl: {
          method: 'handleCreate'
        },
        // 导入车辆
        drcl: {
          method: 'handleImportFile'
        }
      }
    }
  },
  watch: {
    'rightDrawerEvent': {
      handler () {
        this.handlerRightDrawerEvent()
      },
      immediate: true
    }
  },
  created() {
    const actionObj = this.actions[this.$route.query.action]
    // 从别的页面跳转过来调用相应的功能
    if (actionObj && actionObj.method) {
      this[actionObj.method]()
    }
  },
  methods: {
    // 处理搜索组件中的单击事件
    handleClickSearchBtn (data) {
      this.nowTime = Date.now()
      if (this[data.type]) {
        this[data.type]()
      }
    },
    // 清空
    clearCondition () {
      this.$store.commit('resetVehicleQueryParams')
      this.searchData()
    },
    saveData (data) {
      if (data.id) {
        return this.$store.dispatch('editVehicleData', data)
      }
      return this.$store.dispatch('addVehicleData', data)
    },
    // 新建车辆
    handleCreate (vehicleId) {
      const _this = this
      const buttons = this.getRightDrawerFooterButtons({
        key: vehicleId ? managePerms.vehicle2.edit : managePerms.vehicle2.add,
        method: 'saveData',
        callback () {
          _this.searchData(!vehicleId)
          _this.$refs.carStatistics.refresh()
        }
      })
      const vars = { nowTime: Date.now(), vehicleId }
      // eslint-disable-next-line max-len
      this.showRightDrawer(EditCarModel, this.$t(vehicleId ? 'edit' : 'new') + this.$t('vehicle'), buttons, 'large', vars)
    },
    // 点击文件导入按钮
    handleImportFile () {
      const title = this.$t('importVehicle')
      this.showRightDrawer(ImportCarModel, title, [], 'small')
    },
    searchData (isToFirstPage) {
      this.$refs.carModelList.refreshData(isToFirstPage)
    },
    // 查看车辆详情
    showVehicleDetail (record) {
      this.showRightDrawer(CarModelDetail, this.$t('vehicleDetail'), [], '85%', { time: Date.now(), vin: record.vin })
    },
    handlerRightDrawerEvent () {
      const method = this[this.rightDrawerEvent.key]
      if (method) {
        method(this.rightDrawerEvent.data)
      }
    },
    // 导入成功后需要处理的事,更新列表
    uploadOk () {
      this.searchData()
    }
  },
  beforeDestroy () {
    this.$store.commit('resetVehicleQueryParams')
  }
}
</script>
<style lang="less">
@import url("./style/prodList.less");
</style>
